import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { User, Mail, Calendar, Award } from 'lucide-react'

const UserProfile = ({ user = null }) => {
  const [isEditing, setIsEditing] = useState(false)
  const [profile, setProfile] = useState({
    name: user?.name || '京剧爱好者',
    email: user?.email || 'user@example.com',
    joinDate: user?.joinDate || '2024-01-01',
    level: user?.level || '初级',
    avatar: user?.avatar || '/api/placeholder/100/100'
  })

  const handleSave = () => {
    setIsEditing(false)
    // 这里可以添加保存到后端的逻辑
    console.log('保存用户资料:', profile)
  }

  const handleCancel = () => {
    setIsEditing(false)
    // 重置为原始数据
    setProfile({
      name: user?.name || '京剧爱好者',
      email: user?.email || 'user@example.com',
      joinDate: user?.joinDate || '2024-01-01',
      level: user?.level || '初级',
      avatar: user?.avatar || '/api/placeholder/100/100'
    })
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="max-w-md mx-auto bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-opera-red/20 shadow-xl"
    >
      <div className="text-center mb-6">
        <motion.div
          whileHover={{ scale: 1.05 }}
          className="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-opera-red to-opera-blue overflow-hidden border-4 border-opera-gold/30"
        >
          <img
            src={profile.avatar}
            alt="用户头像"
            className="w-full h-full object-cover"
          />
        </motion.div>
        
        {isEditing ? (
          <input
            type="text"
            value={profile.name}
            onChange={(e) => setProfile({ ...profile, name: e.target.value })}
            className="text-2xl font-bold text-center bg-transparent border-b-2 border-opera-red text-opera-white jing-title"
          />
        ) : (
          <h2 className="text-2xl font-bold text-opera-white jing-title">
            {profile.name}
          </h2>
        )}
      </div>

      <div className="space-y-4">
        <div className="flex items-center space-x-3">
          <Mail className="w-5 h-5 text-opera-blue" />
          {isEditing ? (
            <input
              type="email"
              value={profile.email}
              onChange={(e) => setProfile({ ...profile, email: e.target.value })}
              className="flex-1 bg-transparent border-b border-opera-red text-opera-white jing-content"
            />
          ) : (
            <span className="text-opera-white jing-content">{profile.email}</span>
          )}
        </div>

        <div className="flex items-center space-x-3">
          <Calendar className="w-5 h-5 text-opera-blue" />
          <span className="text-opera-white jing-content">
            加入时间: {profile.joinDate}
          </span>
        </div>

        <div className="flex items-center space-x-3">
          <Award className="w-5 h-5 text-opera-gold" />
          {isEditing ? (
            <select
              value={profile.level}
              onChange={(e) => setProfile({ ...profile, level: e.target.value })}
              className="bg-transparent border border-opera-red rounded px-2 py-1 text-opera-white jing-content"
            >
              <option value="初级">初级</option>
              <option value="中级">中级</option>
              <option value="高级">高级</option>
              <option value="专家">专家</option>
            </select>
          ) : (
            <span className="text-opera-white jing-content">
              等级: {profile.level}
            </span>
          )}
        </div>
      </div>

      <div className="mt-6 flex justify-center space-x-4">
        {isEditing ? (
          <>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={handleSave}
              className="px-6 py-2 bg-opera-red text-opera-white rounded-lg jing-button hover:bg-opera-red/80 transition-colors"
            >
              保存
            </motion.button>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={handleCancel}
              className="px-6 py-2 bg-opera-blue text-opera-white rounded-lg jing-button hover:bg-opera-blue/80 transition-colors"
            >
              取消
            </motion.button>
          </>
        ) : (
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => setIsEditing(true)}
            className="px-6 py-2 bg-gradient-to-r from-opera-red to-opera-blue text-opera-white rounded-lg jing-button hover:from-opera-red/80 hover:to-opera-blue/80 transition-all"
          >
            编辑资料
          </motion.button>
        )}
      </div>
    </motion.div>
  )
}

export default UserProfile

